React Server Actions: Serverseitige Formularverarbeitung vereinfacht

React Server Actions, eingeführt in React 18 und in Next.js erheblich verbessert, bieten einen revolutionären Ansatz zur direkten serverseitigen Verarbeitung von Formulareingaben und Datenmutationen. Diese leistungsstarke Funktion vereinfacht den Entwicklungsprozess, erhöht die Sicherheit und verbessert die Leistung im Vergleich zum traditionellen clientseitigen Datenabruf und zur Manipulation.

Was sind React Server Actions?

Server Actions sind asynchrone Funktionen, die auf dem Server ausgeführt und direkt von React-Komponenten aufgerufen werden können. Sie ermöglichen es Ihnen, serverseitige Aufgaben auszuführen, wie zum Beispiel:

• Formulareingaben: Formulardaten sicher auf dem Server verarbeiten.
• Datenmutationen: Datenbanken oder externe APIs aktualisieren.
• Authentifizierung: Benutzeranmeldungen und Registrierungen handhaben.
• Serverseitige Logik: Komplexe Geschäftslogik ausführen, ohne sie dem Client preiszugeben.

Der Hauptvorteil von Server Actions besteht darin, dass sie es Ihnen ermöglichen, serverseitigen Code direkt in Ihren React-Komponenten zu schreiben. Dies beseitigt die Notwendigkeit separater API-Routen und komplexer clientseitiger Datenabruflogik. Diese Bündelung von UI und serverseitiger Logik führt zu einer wartungsfreundlicheren und effizienteren Codebasis.

Vorteile der Verwendung von React Server Actions

Die Verwendung von React Server Actions bietet mehrere wesentliche Vorteile:

Vereinfachte Entwicklung

Server Actions reduzieren Boilerplate-Code, indem sie es Ihnen ermöglichen, Formulareingaben und Datenmutationen direkt in Ihren React-Komponenten zu handhaben. Dies beseitigt die Notwendigkeit separater API-Endpunkte und komplexer clientseitiger Datenabruflogik, was den Entwicklungsprozess optimiert und Ihren Code leichter verständlich und wartbar macht. Betrachten Sie ein einfaches Kontaktformular. Ohne Server Actions bräuchten Sie eine separate API-Route zur Verarbeitung der Formulareingabe, clientseitiges JavaScript zum Senden der Daten und Fehlerbehandlungslogik sowohl auf dem Client als auch auf dem Server. Mit Server Actions kann all dies innerhalb der Komponente selbst gehandhabt werden.

Erhöhte Sicherheit

Indem der Code auf dem Server ausgeführt wird, reduzieren Server Actions die Angriffsfläche Ihrer Anwendung. Sensible Daten und Geschäftslogik werden vom Client ferngehalten, was böswillige Benutzer daran hindert, sie zu manipulieren. Beispielsweise werden Datenbankzugangsdaten oder API-Schlüssel niemals im clientseitigen Code offengelegt. Alle Datenbankinteraktionen finden auf dem Server statt, was das Risiko von SQL-Injection oder unbefugtem Datenzugriff mindert.

Verbesserte Leistung

Server Actions können die Leistung verbessern, indem sie die Menge an JavaScript reduzieren, die auf dem Client heruntergeladen und ausgeführt werden muss. Dies ist besonders vorteilhaft für Benutzer mit leistungsschwachen Geräten oder langsamen Internetverbindungen. Die Datenverarbeitung erfolgt auf dem Server, und nur die notwendigen UI-Aktualisierungen werden an den Client gesendet, was zu schnelleren Ladezeiten und einer flüssigeren Benutzererfahrung führt.

Optimistische Updates

Server Actions integrieren sich nahtlos in Reacts Suspense und Transitions und ermöglichen so optimistische Updates. Optimistische Updates erlauben es Ihnen, die Benutzeroberfläche sofort zu aktualisieren, noch bevor der Server die Aktion bestätigt hat. Dies sorgt für eine reaktionsschnellere und ansprechendere Benutzererfahrung, da die Benutzer nicht auf die Antwort des Servers warten müssen, um die Ergebnisse ihrer Aktionen zu sehen. Im E-Commerce kann das Hinzufügen eines Artikels zum Warenkorb sofort angezeigt werden, während der Server die Hinzufügung im Hintergrund bestätigt.

Progressive Enhancement

Server Actions unterstützen Progressive Enhancement, was bedeutet, dass Ihre Anwendung auch dann noch funktioniert, wenn JavaScript deaktiviert ist oder nicht geladen werden kann. Wenn JavaScript deaktiviert ist, werden Formulare als traditionelle HTML-Formulare gesendet, und der Server übernimmt die Verarbeitung und leitet den Benutzer auf eine neue Seite um. Dies stellt sicher, dass Ihre Anwendung für alle Benutzer zugänglich bleibt, unabhängig von ihrer Browserkonfiguration oder den Netzwerkbedingungen. Dies ist besonders wichtig für die Barrierefreiheit und SEO.

Wie man React Server Actions verwendet

Um React Server Actions zu verwenden, benötigen Sie ein Framework, das sie unterstützt, wie zum Beispiel Next.js. Hier ist eine Schritt-für-Schritt-Anleitung:

1. Die Server Action definieren

Erstellen Sie eine asynchrone Funktion, die auf dem Server ausgeführt wird. Diese Funktion sollte die Logik handhaben, die Sie auf dem Server ausführen möchten, wie z. B. das Aktualisieren einer Datenbank oder das Aufrufen einer API. Kennzeichnen Sie die Funktion mit der `"use server"`-Direktive am Anfang, um anzuzeigen, dass es sich um eine Server Action handelt. Diese Direktive weist den React-Compiler an, die Funktion als serverseitige Funktion zu behandeln und die Serialisierung und Deserialisierung von Daten zwischen Client und Server automatisch zu handhaben.

            // app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

Erklärung:

• Die `'use server'`-Direktive kennzeichnet diese Funktion als Server Action.
• `revalidatePath('/')` leert den Routen-Cache und stellt sicher, dass die aktualisierten Daten bei der nächsten Anfrage abgerufen werden. Dies ist entscheidend für die Aufrechterhaltung der Datenkonsistenz.
• `saveMessage(message)` ist ein Platzhalter für Ihre tatsächliche Datenbankinteraktionslogik. Es wird angenommen, dass Sie an anderer Stelle eine `saveMessage`-Funktion definiert haben, die das Speichern der Nachricht in Ihrer Datenbank übernimmt.
• Die Funktion gibt ein Zustandsobjekt zurück, das verwendet werden kann, um dem Benutzer Feedback anzuzeigen.

2. Die Server Action in Ihre Komponente importieren und verwenden

Importieren Sie die Server Action in Ihre React-Komponente und verwenden Sie sie als `action`-Prop für ein Formularelement. Der `useFormState`-Hook kann verwendet werden, um den Zustand des Formulars zu verwalten und dem Benutzer Feedback anzuzeigen.

            // app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      Message:
      
      Submit
      {state?.message && 
{state.message}
}
    
  );
}
            

              
                Copy
              
            
          

Erklärung:

• Die `'use client'`-Direktive gibt an, dass dies eine Client-Komponente ist (da sie `useFormState` verwendet).
• `useFormState(createMessage, {message: ''})` initialisiert den Formularzustand mit der `createMessage` Server Action. Das zweite Argument ist der Anfangszustand.
• Die `action`-Prop des `form`-Elements wird auf die von `useFormState` zurückgegebene `formAction` gesetzt.
• Die `state`-Variable enthält den Rückgabewert der Server Action, der verwendet werden kann, um dem Benutzer Feedback anzuzeigen.

3. Formulardaten verarbeiten

Innerhalb der Server Action können Sie auf die Formulardaten über die `FormData`-API zugreifen. Diese API bietet eine bequeme Möglichkeit, auf die Werte von Formularfeldern zuzugreifen.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}
            

              
                Copy
              
            
          

4. Fehlerbehandlung

Verwenden Sie `try...catch`-Blöcke, um Fehler zu behandeln, die während der Ausführung der Server Action auftreten können. Geben Sie eine Fehlermeldung im Zustandsobjekt zurück, um sie dem Benutzer anzuzeigen.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

5. Daten revalidieren

Nachdem eine Server Action Daten erfolgreich mutiert hat, müssen Sie möglicherweise den Daten-Cache revalidieren, um sicherzustellen, dass die Benutzeroberfläche die neuesten Änderungen widerspiegelt. Verwenden Sie die Funktionen `revalidatePath` oder `revalidateTag` aus `next/cache`, um bestimmte Pfade oder Tags zu revalidieren.

            'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}
            

              
                Copy
              
            
          

Erweiterte Nutzung

Daten mutieren

Server Actions eignen sich besonders gut zum Mutieren von Daten, wie zum Beispiel dem Aktualisieren von Datenbanken oder externen APIs. Sie können Server Actions verwenden, um komplexe Datenmutationen zu handhaben, die serverseitige Logik erfordern, wie die Validierung von Daten, die Durchführung von Berechnungen oder die Interaktion mit mehreren Datenquellen. Stellen Sie sich ein Szenario vor, in dem Sie das Profil eines Benutzers aktualisieren und eine Bestätigungs-E-Mail senden müssen. Eine Server Action kann sowohl die Datenbankaktualisierung als auch den E-Mail-Versand in einer einzigen, atomaren Operation abwickeln.

Authentifizierung und Autorisierung

Server Actions können zur Handhabung von Authentifizierung und Autorisierung verwendet werden. Indem Sie Authentifizierungs- und Autorisierungsprüfungen auf dem Server durchführen, können Sie sicherstellen, dass nur autorisierte Benutzer Zugriff auf sensible Daten und Funktionalitäten haben. Sie können Server Actions verwenden, um Benutzeranmeldungen, Registrierungen und das Zurücksetzen von Passwörtern zu verwalten. Beispielsweise kann eine Server Action Benutzeranmeldeinformationen mit einer Datenbank abgleichen und ein Token zurückgeben, das zur Authentifizierung nachfolgender Anfragen verwendet werden kann.

Edge-Funktionen

Server Actions können als Edge-Funktionen bereitgestellt werden, die auf einem globalen Netzwerk von Servern in der Nähe Ihrer Benutzer ausgeführt werden. Dies kann die Latenz erheblich reduzieren und die Leistung verbessern, insbesondere für Benutzer an geografisch verteilten Standorten. Edge-Funktionen sind ideal für die Handhabung von Server Actions, die eine geringe Latenz erfordern, wie z. B. Echtzeit-Datenaktualisierungen oder die Bereitstellung personalisierter Inhalte. Next.js bietet integrierte Unterstützung für die Bereitstellung von Server Actions als Edge-Funktionen.

Streaming

Server Actions unterstützen Streaming, was es Ihnen ermöglicht, Daten in Teilen an den Client zu senden, sobald sie verfügbar sind. Dies kann die wahrgenommene Leistung Ihrer Anwendung verbessern, insbesondere bei Server Actions, deren Ausführung lange dauert. Streaming ist besonders nützlich für die Verarbeitung großer Datenmengen oder komplexer Berechnungen. Zum Beispiel können Sie Suchergebnisse an den Client streamen, während sie aus der Datenbank abgerufen werden, was zu einer reaktionsschnelleren Benutzererfahrung führt.

Best Practices

Hier sind einige Best Practices, die Sie bei der Verwendung von React Server Actions befolgen sollten:

• Halten Sie Server Actions klein und fokussiert: Jede Server Action sollte eine einzelne, klar definierte Aufgabe ausführen. Dies macht Ihren Code leichter verständlich, testbar und wartbar.
• Verwenden Sie aussagekräftige Namen: Wählen Sie Namen, die den Zweck der Server Action klar angeben. Beispielsweise sind `createComment` oder `updateUserProfile` besser als generische Namen wie `processData`.
• Validieren Sie Daten auf dem Server: Validieren Sie Daten immer auf dem Server, um zu verhindern, dass böswillige Benutzer ungültige Daten in Ihre Anwendung einschleusen. Dies umfasst die Validierung von Datentypen, Formaten und Wertebereichen.
• Behandeln Sie Fehler ordnungsgemäß: Verwenden Sie `try...catch`-Blöcke zur Fehlerbehandlung und geben Sie dem Benutzer informative Fehlermeldungen. Vermeiden Sie es, sensible Fehlerinformationen an den Client weiterzugeben.
• Nutzen Sie optimistische Updates: Sorgen Sie für eine reaktionsschnellere Benutzererfahrung, indem Sie die Benutzeroberfläche sofort aktualisieren, noch bevor der Server die Aktion bestätigt hat.
• Revalidieren Sie Daten bei Bedarf: Stellen Sie sicher, dass die Benutzeroberfläche die neuesten Änderungen widerspiegelt, indem Sie den Daten-Cache nach einer Datenmutation durch eine Server Action revalidieren.

Beispiele aus der Praxis

Betrachten wir einige Beispiele aus der Praxis, wie React Server Actions in verschiedenen Anwendungsarten eingesetzt werden können:

E-Commerce-Anwendung

• Artikel zum Warenkorb hinzufügen: Eine Server Action kann das Hinzufügen eines Artikels zum Warenkorb des Benutzers und das Aktualisieren der Gesamtsumme in der Datenbank übernehmen. Optimistische Updates können verwendet werden, um den Artikel sofort im Warenkorb anzuzeigen.
• Zahlung abwickeln: Eine Server Action kann die Abwicklung einer Zahlung über einen Drittanbieter-Zahlungs-Gateway übernehmen. Die Server Action kann auch den Bestellstatus in der Datenbank aktualisieren und eine Bestätigungs-E-Mail an den Benutzer senden.
• Produktbewertung abgeben: Eine Server Action kann das Absenden einer Produktbewertung und das Speichern in der Datenbank übernehmen. Die Server Action kann auch die durchschnittliche Bewertung für das Produkt berechnen und die Produktdetailseite aktualisieren.

Social-Media-Anwendung

• Einen neuen Tweet posten: Eine Server Action kann das Posten eines neuen Tweets und das Speichern in der Datenbank übernehmen. Die Server Action kann auch die Timeline des Benutzers aktualisieren und seine Follower benachrichtigen.
• Einen Beitrag liken: Eine Server Action kann das Liken eines Beitrags und das Aktualisieren der Like-Anzahl in der Datenbank übernehmen. Optimistische Updates können verwendet werden, um die aktualisierte Like-Anzahl sofort anzuzeigen.
• Einem Benutzer folgen: Eine Server Action kann das Folgen eines Benutzers und das Aktualisieren der Follower- und Following-Zahlen in der Datenbank übernehmen.

Content-Management-System (CMS)

• Einen neuen Blogbeitrag erstellen: Eine Server Action kann das Erstellen eines neuen Blogbeitrags und das Speichern in der Datenbank übernehmen. Die Server Action kann auch einen Slug für den Beitrag generieren und die Sitemap aktualisieren.
• Eine Seite aktualisieren: Eine Server Action kann das Aktualisieren einer Seite und das Speichern in der Datenbank übernehmen. Die Server Action kann auch den Seiten-Cache revalidieren, um sicherzustellen, dass der aktualisierte Inhalt den Benutzern angezeigt wird.
• Eine Änderung veröffentlichen: Eine Server Action kann das Veröffentlichen einer Änderung in der Datenbank und die Benachrichtigung aller Abonnenten übernehmen.

Überlegungen zur Internationalisierung

Bei der Entwicklung von Anwendungen für ein globales Publikum ist es unerlässlich, Internationalisierung (i18n) und Lokalisierung (l10n) zu berücksichtigen. Hier sind einige Überlegungen zur Verwendung von React Server Actions in internationalisierten Anwendungen:

• Umgang mit verschiedenen Datums- und Zeitformaten: Verwenden Sie die `Intl`-API, um Daten und Zeiten entsprechend der Ländereinstellung des Benutzers zu formatieren.
• Umgang mit verschiedenen Zahlenformaten: Verwenden Sie die `Intl`-API, um Zahlen entsprechend der Ländereinstellung des Benutzers zu formatieren.
• Umgang mit verschiedenen Währungen: Verwenden Sie die `Intl`-API, um Währungen entsprechend der Ländereinstellung des Benutzers zu formatieren.
• Übersetzen von Fehlermeldungen: Übersetzen Sie Fehlermeldungen in die Sprache des Benutzers.
• Unterstützung von Rechts-nach-Links-Sprachen (RTL): Stellen Sie sicher, dass Ihre Anwendung RTL-Sprachen wie Arabisch und Hebräisch unterstützt.

Beispielsweise kann eine Server Action bei der Verarbeitung eines Formulars, das eine Datumseingabe erfordert, die `Intl.DateTimeFormat`-API verwenden, um das Datum entsprechend der Ländereinstellung des Benutzers zu parsen. Dadurch wird sichergestellt, dass das Datum unabhängig von den regionalen Einstellungen des Benutzers korrekt interpretiert wird.

Fazit

React Server Actions sind ein leistungsstarkes Werkzeug zur Vereinfachung der serverseitigen Formularverarbeitung und Datenmutationen in React-Anwendungen. Indem sie es Ihnen ermöglichen, serverseitigen Code direkt in Ihren React-Komponenten zu schreiben, reduzieren Server Actions Boilerplate-Code, erhöhen die Sicherheit, verbessern die Leistung und ermöglichen optimistische Updates. Wenn Sie die in diesem Leitfaden beschriebenen Best Practices befolgen, können Sie Server Actions nutzen, um robustere, skalierbarere und wartbarere React-Anwendungen zu erstellen. Da sich React ständig weiterentwickelt, werden Server Actions zweifellos eine immer wichtigere Rolle in der Zukunft der Webentwicklung spielen.